<template>
    <div>
        <h3>上传头像组件</h3>
        <!-- 
上传组件内部：
如果imageUrl存在 则取出回显
如果imageUrl不存在 则展示+号
上传组件使用逻辑：
选择文件上传，如果上传成功，可以用imageUrl接收上传成功的文件路径 回显
如果上传失败 可以给前端提示

elementplus的组件可以在官方文档中查找api 
-->
        <el-upload
                   class="avatar-uploader"
                   :action="uploadImgUrl"
                   :show-file-list="false"
                   :headers="{ token: '123456' }"
                   name="img"
                   :on-success="handleUploadImgSuccess"
                   :on-error="handleUploadImgError"
                   >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>

        <div>
            <h3>ep的栅格系统：</h3>
            <!-- 
elementplus 可以通过el-row将一行划分为24个span(单元格)
再通过el-col 设置它需要占几个span
-->

            <el-row>
                <el-col :span="2" style="border: 1px solid red">
                    <el-button type="info">dianwo !!</el-button>
                </el-col>
                <el-col :span="4" style="border: 1px solid yellow">
                    <el-button type="danger">dianwo2 !!</el-button>
                </el-col>
                <el-col :span="6" style="border: 1px solid #888">
                    <el-button type="primary">dianwo3 !!</el-button>
                </el-col>
                <el-col :span="12" style="border: 1px solid green">
                    <el-button type="primary">dianwo4 !!</el-button>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { ref } from "vue";
    import { Plus } from "@element-plus/icons-vue";
    import { ElMessage } from "element-plus";
    let imageUrl = ref(null);

    let uploadImgUrl = "http://localhost:8080/schedule/upload";
    //文件上传成功的回调函数
    let handleUploadImgSuccess = (r) => {
        ElMessage.success("上传成功");
        console.log(r.data);
        //接收上传成功的图片地址 回显
        imageUrl.value = r.data;
    };
    //文件上传失败的回调函数
    let handleUploadImgError = (e) => {
        ElMessage.error("网络连接失败");
    };
</script>

<style scoped>
    .avatar-uploader .avatar {
        width: 400px;
        height: 400px;
        display: block;
    }
</style>

<style>
    .avatar-uploader .el-upload {
        border: 1px dashed var(--el-border-color);
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: var(--el-transition-duration-fast);
    }

    .avatar-uploader .el-upload:hover {
        border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 400px;
        height: 400px;
        text-align: center;
    }
</style>